<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/assets/js/jquery-3.7.1.min.js"></script>
    <!-- 自定义CSS样式 -->
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/assets/css/reset.css">
    <script>

        function updateEployee(userId, userName, password, role) {
            $("#update_userId").val(userId)
            $("#update_username").val(userName)
            $("#update_password").val(password)
            $("#update_role").val(role)

        }
        function doUpdateEployee() {
            var userId = $("#update_userId").val()
            var username = $("#update_username").val();
            var password = $("#update_password").val();
            var role = $("#update_role").val();
            let formData = new FormData();
            formData.append("userId", userId);
            formData.append("userName", username);
            formData.append("password", password);
            formData.append("role", role);
            $.ajax({
                url: "${pageContext.request.contextPath}/updateEployee",
                headers: {
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache"
                },
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    alert(data.msg);
                    if (data.flag === 1) {
                        window.location.href = "${pageContext.request.contextPath}/eployeeTable"
                    }
                }
            });
        }

        function deleteEployee(userId) {
            let formData = new FormData();
            formData.append("userId", userId);
            $.ajax({
                url: "${pageContext.request.contextPath}/deleteEployee",
                headers: {
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache"
                },
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    alert(data.msg);
                    if (data.flag === 1) {
                        window.location.href = "${pageContext.request.contextPath}/eployeeTable"
                    }
                }
            });
        }

        function addEployee() {
            var username = $("#add_username").val();
            var password = $("#add_password").val();
            var role = $("#add_role").val();
            let formData = new FormData();
            formData.append("userName", username);
            formData.append("password", password);
            formData.append("role", role);
            $.ajax({
                url: "${pageContext.request.contextPath}/addEployee",
                headers: {
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache"
                },
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    alert(data.msg);
                    if (data.flag === 1) {
                        window.location.href = "${pageContext.request.contextPath}/eployeeTable"
                    }
                }
            });
        }
    </script>
    <script>
        function getUserRole(roleId) {
            switch (roleId) {
                case 0:
                    return "管理员";
                case 1:
                    return "采购员";
                case 2:
                    return "销售员";
                case 3:
                    return "供应商";
                case 4:
                    return "客户";
                default:
                    return "未知角色";
            }
        }
        $(document).ready(function () {
            $('#reverseCheck1').on('change', function () {
                if (this.checked) {
                    $('#reverseCheck2').prop('checked', false);
                    $('#reverseCheck3').prop('checked', false);
                    // 发起ajax请求
                    var role = $("#reverseCheck1").val();
                    var userName = $("#search").val();
                    let formData2 = new FormData();
                    // formData2.append("password", password);
                    formData2.append("role", role);
                    if(userName!==null&&userName!==''){
                        formData2.append("userName", userName);
                    }

                    $.ajax({
                        url: "${pageContext.request.contextPath}/selectUserBySelective",
                        headers: {
                            "Cache-Control": "no-cache",
                            "Pragma": "no-cache"
                        },
                        type: "post",
                        data: formData2,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function (data) {
                            const users = data.data.users;
                            console.log(users)
                            if (data.flag === 1) {
                                let str = ''
                                users.forEach((uItem, uIndex) => {
                                    str += `
                                    <tr >
                                        <td>` + users[uIndex].userId + `</td>
                                        <td>` + users[uIndex].userName + `</td>
                                        <td>` + users[uIndex].password + `</td>
                                        <td> `+getUserRole(users[uIndex].role)+`</td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-warning"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#updateUser"
                                                    onclick="updateEployee('`+users[uIndex].userId+`','`+users[uIndex].userName+`','`+users[uIndex].password+`','`+users[uIndex].role+`')">修改
                                                    </button>
                                                    <button type="button"
                                                    class="btn btn-danger"
                                                    onclick="deleteEployee('`+users[uIndex].userId+`')">删除
                                                    </button>
                                        </td>
                                    </tr>`
                                })
                                $('table tbody').html(str);
                            }
                        }
                    });
                }else {
                    let formData3 = new FormData();
                    $.ajax({
                        url: "${pageContext.request.contextPath}/selectUserBySelective",
                        headers: {
                            "Cache-Control": "no-cache",
                            "Pragma": "no-cache"
                        },
                        type: "post",
                        data: formData3,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function (data) {
                            const users = data.data.users;
                            console.log(users)
                            if (data.flag === 1) {
                                let str = ''
                                users.forEach((uItem, uIndex) => {
                                    if(uItem.role===2||uItem.role===1||uItem.role===2){
                                        str += `
                                    <tr >
                                        <td>` + users[uIndex].userId + `</td>
                                        <td>` + users[uIndex].userName + `</td>
                                        <td>` + users[uIndex].password + `</td>
                                        <td> `+getUserRole(users[uIndex].role)+`</td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-warning"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#updateUser"
                                                    onclick="updateEployee('`+users[uIndex].userId+`','`+users[uIndex].userName+`','`+users[uIndex].password+`','`+users[uIndex].role+`')">修改
                                                    </button>
                                                    <button type="button"
                                                    class="btn btn-danger"
                                                    onclick="deleteEployee('`+users[uIndex].userId+`')">删除
                                                    </button>
                                        </td>
                                    </tr>`
                                    }

                                })
                                $('table tbody').html(str);
                            }
                        }
                    });
                }
            });

            $('#reverseCheck2').on('change', function () {
                if (this.checked) {
                    $('#reverseCheck1').prop('checked', false);
                    $('#reverseCheck3').prop('checked', false);
                    // 发起ajax请求
                    var role = $("#reverseCheck2").val();
                    var userName = $("#search").val();
                    let formData2 = new FormData();
                    // formData2.append("password", password);
                    formData2.append("role", role);
                    if(userName!==null&&userName!==''){
                        formData2.append("userName", userName);
                    }

                    $.ajax({
                        url: "${pageContext.request.contextPath}/selectUserBySelective",
                        headers: {
                            "Cache-Control": "no-cache",
                            "Pragma": "no-cache"
                        },
                        type: "post",
                        data: formData2,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function (data) {
                            const users = data.data.users;
                            console.log(users)
                            if (data.flag === 1) {
                                let str = ''
                                users.forEach((uItem, uIndex) => {
                                    str += `
                                    <tr >
                                        <td>` + users[uIndex].userId + `</td>
                                        <td>` + users[uIndex].userName + `</td>
                                        <td>` + users[uIndex].password + `</td>
                                        <td> `+getUserRole(users[uIndex].role)+`</td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-warning"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#updateUser"
                                                    onclick="updateEployee('`+users[uIndex].userId+`','`+users[uIndex].userName+`','`+users[uIndex].password+`','`+users[uIndex].role+`')">修改
                                                    </button>
                                                    <button type="button"
                                                    class="btn btn-danger"
                                                    onclick="deleteEployee('`+users[uIndex].userId+`')">删除
                                                    </button>
                                        </td>
                                    </tr>`
                                })
                                $('table tbody').html(str);
                            }
                        }
                    });
                }else {
                    let formData3 = new FormData();
                    $.ajax({
                        url: "${pageContext.request.contextPath}/selectUserBySelective",
                        headers: {
                            "Cache-Control": "no-cache",
                            "Pragma": "no-cache"
                        },
                        type: "post",
                        data: formData3,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function (data) {
                            const users = data.data.users;
                            console.log(users)
                            if (data.flag === 1) {
                                let str = ''
                                users.forEach((uItem, uIndex) => {
                                    if(uItem.role===2||uItem.role===1||uItem.role===2){
                                        str += `
                                    <tr >
                                        <td>` + users[uIndex].userId + `</td>
                                        <td>` + users[uIndex].userName + `</td>
                                        <td>` + users[uIndex].password + `</td>
                                        <td> `+getUserRole(users[uIndex].role)+`</td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-warning"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#updateUser"
                                                    onclick="updateEployee('`+users[uIndex].userId+`','`+users[uIndex].userName+`','`+users[uIndex].password+`','`+users[uIndex].role+`')">修改
                                                    </button>
                                                    <button type="button"
                                                    class="btn btn-danger"
                                                    onclick="deleteEployee('`+users[uIndex].userId+`')">删除
                                                    </button>
                                        </td>
                                    </tr>`
                                    }

                                })
                                $('table tbody').html(str);
                            }
                        }
                    });
                }

            });

            $('#reverseCheck3').on('change', function () {
                if (this.checked) {
                    $('#reverseCheck1').prop('checked', false);
                    $('#reverseCheck2').prop('checked', false);
                    // 发起ajax请求
                    var role = $("#reverseCheck3").val();
                    var userName = $("#search").val();
                    let formData2 = new FormData();
                    // formData2.append("password", password);
                    formData2.append("role", role);
                    if(userName!==null&&userName!==''){
                        formData2.append("userName", userName);
                    }

                    $.ajax({
                        url: "${pageContext.request.contextPath}/selectUserBySelective",
                        headers: {
                            "Cache-Control": "no-cache",
                            "Pragma": "no-cache"
                        },
                        type: "post",
                        data: formData2,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function (data) {
                            const users = data.data.users;
                            console.log(users)
                            if (data.flag === 1) {
                                let str = ''
                                users.forEach((uItem, uIndex) => {
                                    str += `
                                    <tr >
                                        <td>` + users[uIndex].userId + `</td>
                                        <td>` + users[uIndex].userName + `</td>
                                        <td>` + users[uIndex].password + `</td>
                                        <td> `+getUserRole(users[uIndex].role)+`</td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-warning"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#updateUser"
                                                    onclick="updateEployee('`+users[uIndex].userId+`','`+users[uIndex].userName+`','`+users[uIndex].password+`','`+users[uIndex].role+`')">修改
                                                    </button>
                                                    <button type="button"
                                                    class="btn btn-danger"
                                                    onclick="deleteEployee('`+users[uIndex].userId+`')">删除
                                                    </button>
                                        </td>
                                    </tr>`
                                })
                                $('table tbody').html(str);
                            }
                        }
                    });
                }else {
                    let formData3 = new FormData();
                    $.ajax({
                        url: "${pageContext.request.contextPath}/selectUserBySelective",
                        headers: {
                            "Cache-Control": "no-cache",
                            "Pragma": "no-cache"
                        },
                        type: "post",
                        data: formData3,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function (data) {
                            const users = data.data.users;
                            console.log(users)
                            if (data.flag === 1) {
                                let str = ''
                                users.forEach((uItem, uIndex) => {
                                    if(uItem.role===2||uItem.role===1||uItem.role===2){
                                        str += `
                                    <tr >
                                        <td>` + users[uIndex].userId + `</td>
                                        <td>` + users[uIndex].userName + `</td>
                                        <td>` + users[uIndex].password + `</td>
                                        <td> `+getUserRole(users[uIndex].role)+`</td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-warning"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#updateUser"
                                                    onclick="updateEployee('`+users[uIndex].userId+`','`+users[uIndex].userName+`','`+users[uIndex].password+`','`+users[uIndex].role+`')">修改
                                                    </button>
                                                    <button type="button"
                                                    class="btn btn-danger"
                                                    onclick="deleteEployee('`+users[uIndex].userId+`')">删除
                                                    </button>
                                        </td>
                                    </tr>`
                                    }

                                })
                                $('table tbody').html(str);
                            }
                        }
                    });
                }

            });
        });

        function search(){
            // 发起ajax请求
            var userName = $("#search").val();
            let formData2 = new FormData();
            // formData2.append("password", password);
            if($("#reverseCheck2").prop('checked')){
                formData2.append("role",$("#reverseCheck2").val());
            }
            if($("#reverseCheck1").prop('checked')){
                formData2.append("role",$("#reverseCheck1").val());
            }
            if($("#reverseCheck3").prop('checked')){
                formData2.append("role",$("#reverseCheck3").val());
            }
            if(userName!==null&&userName!==''){
                formData2.append("userName", userName);
            }
            $.ajax({
                url: "${pageContext.request.contextPath}/selectUserBySelective",
                headers: {
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache"
                },
                type: "post",
                data: formData2,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    const users = data.data.users;
                    console.log(users)
                    if (data.flag === 1) {
                        let str = ''
                        users.forEach((uItem, uIndex) => {
                            if(uItem.role===2||uItem.role===1||uItem.role===0){
                                str += `
                                    <tr >
                                        <td>` + users[uIndex].userId + `</td>
                                        <td>` + users[uIndex].userName + `</td>
                                        <td>` + users[uIndex].password + `</td>
                                        <td> `+getUserRole(users[uIndex].role)+`</td>
                                        <td>
                                            <button type="button"
                                                    class="btn btn-warning"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#updateUser"
                                                    onclick="updateEployee('`+users[uIndex].userId+`','`+users[uIndex].userName+`','`+users[uIndex].password+`','`+users[uIndex].role+`')">修改
                                                    </button>
                                                    <button type="button"
                                                    class="btn btn-danger"
                                                    onclick="deleteEployee('`+users[uIndex].userId+`')">删除
                                                    </button>
                                        </td>
                                    </tr>`
                            }

                        })
                        $('table tbody').html(str);
                    }
                }
            });
        }
    </script>
    <style>
        td,tr,th{
            text-align: center;
            line-height: 54px;
        }
    </style>
</head>

<body>
<div class="row shadow-none p-3 mb-5 bg-light rounded fixed-top">
    <div class="col ">
        <div class="input-group mb-3">
            <div class="form-check form-check-reverse" style="margin:7px 5px 0 5px">
                <input class="form-check-input" type="checkbox" value="0" id="reverseCheck1">
                <label class="form-check-label" for="reverseCheck1">
                    管理员
                </label>
            </div>
            <div class="form-check form-check-reverse" style="margin:7px 15px 0 5px">
                <input class="form-check-input" type="checkbox" value="1" id="reverseCheck2">
                <label class="form-check-label" for="reverseCheck1">
                    采购员
                </label>
            </div>
            <div class="form-check form-check-reverse" style="margin:7px 15px 0 5px">
                <input class="form-check-input" type="checkbox" value="2" id="reverseCheck3">
                <label class="form-check-label" for="reverseCheck1">
                    销售员
                </label>
            </div>
            <input type="text"
                   id="search"
                   class="form-control"
                   placeholder="员工名称"
                   aria-label="Recipient's username"
                   aria-describedby="button-addon2">
            <div class="input-group-append">
                <button class="btn  btn-primary"
                        type="button"
                        id="button-addon2"
                        onclick="search()">查询
                </button>
            </div>
        </div>
    </div>
    <div class="
                            col">
        <button type="button"
                class="btn btn-primary"
                data-bs-toggle="modal"
                data-bs-target="#addUser">添加
        </button>
    </div>
</div>


<table class="table table-hover " style="margin-top: 100px;margin-bottom: 100px">
    <thead>
    <tr>
        <th scope="col">ID</th>
        <th scope="col">用户名</th>
        <th scope="col">密码</th>
        <th scope="col">角色</th>
        <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="user" items="${users}" varStatus="index">
        <c:if test="${user.role==0||user.role==1||user.role==2}">
            <tr>
                <th scope="row">${user.userId}</th>
                <td>${user.userName}</td>
                <td>${user.password}</td>
                <td>
                    <c:if test="${user.role==0}">管理员</c:if>
                    <c:if test="${user.role==1}">采购员</c:if>
                    <c:if test="${user.role==2}">销售员</c:if>
                    <c:if test="${user.role==3}">供应商</c:if>
                    <c:if test="${user.role==4}">客户</c:if>
                </td>
                <td>
                    <button type="button"
                            class="btn btn-warning"
                            data-bs-toggle="modal"
                            data-bs-target="#updateUser"
                            onclick="updateEployee('${user.userId}','${user.userName}','${user.password}',${user.role})">修改
                    </button>
                    <button type="button"
                            class="btn btn-danger"
                            onclick="deleteEployee(${user.userId})">删除
                    </button>
                </td>
            </tr>
        </c:if>
    </c:forEach>

    </tbody>
</table>


<!-- 增加用户 -->
<div class="modal fade"
     id="addUser"
     tabindex="-1"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5"
                    id="exampleModalLabel">添加用户</h1>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 row">
                    <label for="add_username"
                           class="col-sm-2 col-form-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="text"
                               class="form-control"
                               id="add_username">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="add_password"
                           class="col-sm-2 col-form-label">密码</label>
                    <div class="col-sm-10">
                        <input type="text"
                               class="form-control"
                               id="add_password">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="add_role"
                           class="col-sm-2 col-form-label">角色</label>
                    <div class="col-sm-10">
                        <select class="form-select"
                                id="add_role"
                                aria-label="Default select example">
                            <option value="0">管理员</option>
                            <option value="1">采购员</option>
                            <option value="2">销售员</option>
                        </select>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">取消
                </button>
                <button type="button"
                        class="btn btn-primary"
                        onclick="addEployee()">添加
                </button>
            </div>
        </div>
    </div>
</div>
<!-- 修改用户 -->
<div class="modal fade"
     id="updateUser"
     tabindex="-1"
     aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5"
                    id="exampleModalLabel2">修改员工</h1>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 row">
                    <label for="add_username"
                           class="col-sm-2 col-form-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="hidden" id="update_userId">
                        <input type="text"
                               class="form-control"
                               id="update_username">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="add_password"
                           class="col-sm-2 col-form-label">密码</label>
                    <div class="col-sm-10">
                        <input type="text"
                               class="form-control"
                               id="update_password">
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="add_role"
                           class="col-sm-2 col-form-label">角色</label>
                    <div class="col-sm-10">
                        <select class="form-select"
                                id="update_role"
                                aria-label="Default select example">
                            <option value="0">管理员</option>
                            <option value="1">采购员</option>
                            <option value="2">销售员</option>
                        </select>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">取消
                </button>
                <button type="button"
                        class="btn btn-warning"
                        onclick="doUpdateEployee()">修改
                </button>
            </div>
        </div>
    </div>
</div>


<script>

</script>

<script src="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>


</body>


</html>